<template>
  <el-card class="content">
    <el-form
      :model="eddForm"
      ref="eddFormRef"
      :inline="true"
      label-width="100px"
      class="form"
    >
      <el-form-item label="开始时间">
        <el-date-picker
          type="datetime"
          size="mini"
          v-model="eddForm.startTime"
          placeholder="选择时间"
          :picker-options="pickerOptions0"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          type="datetime"
          size="mini"
          v-model="eddForm.endTime"
          placeholder="选择时间"
          :picker-options="pickerOptions0"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="监测设备类型" class="iput">
        <el-select
          v-model="eddForm.monitorTypeId"
          placeholder="请选择"
          clearable
          size="mini"
        >
          <el-option
            v-for="item in options"
            :key="item.monitorTypeId"
            :label="item.monitorTypeName"
            :value="item.monitorTypeId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="getlists()"
          >查询</el-button
        >
        <el-button type="primary" @click="exportlist()" size="mini"
          >导出</el-button
        >
      </el-form-item>
    </el-form>

    <div class="logtable">
      <el-table
        :data="tableData"
        class="el-table-box"
        stripe
        size="small"
        style="width: 100%"
      >
        <el-table-column label="监测设备" prop="name" align="center">
        </el-table-column>
        <el-table-column prop="description" label="故障原因" align="center">
        </el-table-column>
        <el-table-column prop="warnTime" label="故障时间" align="center">
        </el-table-column>
        <el-table-column prop="dealName" label="处理人" align="center">
        </el-table-column>
        <el-table-column prop="dealType" label="处理方式" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.dealType == 0">恢复正常</span>
            <span v-else-if="scope.row.dealType == 1">一小时内不预警</span>
            <span v-else-if="scope.row.dealType == 2">十二小时内不预警</span>
            <span v-else-if="scope.row.dealType == 3">一天内不预警</span>
            <span v-else-if="scope.row.dealType == 4">三天内不预警</span>
            <span v-else-if="scope.row.dealType == 5">一周内不预警</span>
            <span v-else-if="scope.row.dealType == null">未处理</span>
          </template>
        </el-table-column>
        <el-table-column prop="dealTime" label="处理时间" align="center">
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[10, 15]"
          :page-size="query.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import {
  getWaringDealLogPageList,
  getMonitoringTypeAll,
  getWaringDealLogExportExcel,
} from "../../../api/api";
import moment from "moment";
import { BACKEND_ROOT } from "../../../Constants";
export default {
  components: {},
  props: {
    // node: Object,
  },
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      eddForm: {
        startTime: moment().subtract(2, "month").format("YYYY-MM-DD 00:00:00"),
        endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
        monitorTypeId: null,
      },
      // eddForm: {
      //   startTime: moment().subtract(365, "days").format("YYYY-MM-DD 00:00:00"),
      //   endTime: moment().format("YYYY-MM-DD 00:00:00"),
      //   deviceType: "",
      // },
      tableData: [],
      total: null,
      query: {
        page: 1,
        pagesize: 10,
      },
      tailingPondId: "",
      options: [],
      yuming:
        BACKEND_ROOT +
        "/group/monitoringManagement/getWaringDealLogExportExcel?",
      yumings: "",
    };
  },
  mounted() {
    this.tailingPondId = sessionStorage.getItem("sensorId");
    this.getlist();
    this.getlistss();
  },
  methods: {
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getlist();
    },
    //分页查询
    async getlist() {
      await getWaringDealLogPageList({
        tailingPondId: this.tailingPondId,
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
      }).then((res) => {
        if (res.resultCode == "200") {
          this.tableData = res.parameter.list;
          this.total = res.parameter.total;
        } else {
          this.tableData = [];
          this.$message({
            message: "暂无数据",
            offset: 400,
            duration: 1000,
          });
          this.total = 0;
        }
      });
    },
    //查询
    async getlists() {
      await getWaringDealLogPageList({
        endTime: this.eddForm.endTime,
        startTime: this.eddForm.startTime,
        tailingPondId: this.tailingPondId,
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        monitorTypeId: this.eddForm.monitorTypeId,
      }).then((res) => {
        if (res.resultCode == "200") {
          this.tableData = res.parameter.list;
          this.total = res.parameter.total;
        } else {
          this.tableData = [];
        }
      });
    },

    //导出
    exportlist() {
      this.yumings =
        this.yuming +
        "endTime=" +
        this.eddForm.endTime +
        "&startTime=" +
        this.eddForm.startTime +
        "&monitorTypeId=" +
        this.eddForm.monitorTypeId +
        "&tailingPondId=" +
        this.tailingPondId;
      window.open(this.yumings);
    },
    //所有类型
    async getlistss() {
      await getMonitoringTypeAll({ tailingPondId: this.tailingPondId }).then(
        (res) => {
          this.options = res.parameter;
        }
      );
    },
  },
};
</script>

<style scoped>
.content {
  margin-left: 0.08rem;
  height: 87vh;
}
.logtable .el-table {
  text-align: center;
  /* margin: 0 20px; */
  padding-left: 0.05rem;
  width: 4.5rem;
}
.logtable .el-table-column {
  padding-left: 0.05rem;
}
.logtable .el-button {
  width: 0.8rem;
}
.logtable .el-pagination {
  float: right;
  margin-top: 0.025rem;
}
.form {
  margin-top: 0.15rem;
}
.iput {
  margin-left: 0.1rem;
}
.el-button {
  margin-left: 0.15rem;
}
.el-table-box {
  margin-bottom: 0.1rem;
  display: block;
  height: 61vh;
  overflow: auto;
  text-align: center;
}
.el-table::before {
  z-index: inherit;
}
.el-table-box .el-button {
  width: 0.6rem;
}
</style>